<template>
  <c-template >
    <div class="auth-top mb50 ft16 color101 fwbold">
      <div>{{$t('authMenu.roleName')}}：{{names}}</div>
      <div class="mt15">{{$t('authMenu.roleId')}}：{{nameId}}</div>
    </div>
    <h2 class="mb20 color101 ft16">{{$t('authMenu.menuList')}}</h2>
    <div class="form-list">
      <el-tree :data="lists" show-checkbox ref="rootTree" node-key="id" :default-checked-keys="have"
        :props="defaultProps" style="clear: left">
      </el-tree>
    </div>
    <div class="text-right mt-md">
      <el-button @click="addbtn">{{ $t('authMenu.authorize') }}</el-button>
    </div>
  </c-template>
</template>

<script>
  import vueEvents from '@/assets/js/Event'
  import qs from "qs";
  export default {
    data() {
      return {
        lists: [],
        have: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        names: '',
        nameId: '',
        data: '',
        form: {
          type: []
        },
        checked: true,
      }
    },
    mounted() {
      var val = JSON.parse(sessionStorage.getItem('ids'))
      this.names = val.name;
      this.nameId = val.id;
      this.rolelist(this.nameId)
    },
    methods: {
      rolelist(id) {
        this.$get({
          url: '/role/menu/' + id,
          params: {}
        }).then(res => {
            this.lists = res;
            this.findAllChildren(this.lists, this.have);
        })
      },
      findAllChildren(data, arr) {
        data.forEach((item, index) => {
          if (item.children.length !== 0) {
            this.findAllChildren(item.children, arr);
          } else if (item.have) {
            arr.push(item.id); 
          }
        })
      },
      handleChange(val, id) {
        // console.log(val)
        // console.log(id)
      },
      addbtn() {
        var aKey = this.$refs.rootTree.getCheckedKeys().concat(this.$refs.rootTree.getHalfCheckedKeys())
        var menuIds = aKey.toString();
        this.$get({
          url: '/role/authority/menu',
          params: {
            menuIds: menuIds,
            roleId: this.nameId,
          }
        }).then(res => {
            this.$message({
              type: 'success',
              message: '授权成功'
            });
            this.$router.push('/authority/role/index')
        })
      },
    }
  }
</script>
<style scoped lang="scss">
  .auth-menu-page {
    padding: 80px 0 0 20px;
  }
  .form-list{
    border: 1px solid #e8e8e8;
    border-top-width: 0;
  }
  /deep/ .el-tree-node__content {
    height: auto;
    padding-top: 10px !important;
    padding-bottom: 10px;
    border-top: 1px solid #e8e8e8;
  }
</style>
